<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>首页</title>
  <link rel="stylesheet" href="js/bower_components/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="js/bower_components/bootstrap-select/dist/css/bootstrap-select.min.css">
  <link rel="stylesheet" href="js/bower_components/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.min.css">
  <link rel="stylesheet" href="js/bower_components/bootstrap-table/dist/bootstrap-table.min.css">
  <link rel="stylesheet" href="js/bower_components/bootstrap-treeview/dist/bootstrap-treeview.min.css">
  <link href="js/bower_components/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" rel="stylesheet">

  <script src="js/bower_components/jquery/dist/jquery.min.js"></script>
  <script src="js/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
  <script src="js/bower_components/bootbox.min.js"></script>
  <script src="js/bower_components/bootstrap-select/js/bootstrap-select.js"></script>
  <script src="js/bower_components/bootstrap-switch/dist/js/bootstrap-switch.min.js"></script>
  <script src="js/bower_components/bootstrap-table/dist/bootstrap-table.min.js"></script>
  <script src="js/bower_components/bootstrap-table/dist/locale/bootstrap-table-zh-CN.js"></script>

  <script src="js/bower_components/bootstrap-treeview/dist/bootstrap-treeview.min.js"></script>
  <script src="js/bower_components/jquery-form-validator/form-validator/jquery.form-validator.min.js"></script>
  <script src="js/bower_components/moment/min/moment-with-locales.min.js"></script>
  <script src="js/bower_components/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.min.js"></script>
</head>
<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12">
        <h1 style="float: left; margin-top: 0px;">
          <small>后台管理系统</small>
        </h1>
        <div style="font-size: 210%; float: right; margin-right: 50px;">
          <span class="glyphicon glyphicon-time"></span>
          <span id="currentTime"></span>
          <span class="glyphicon glyphicon-user"></span>
          <b>欢迎你</b>
          <span id="userName">管理员</span>
          <button class="btn btn-danger"><span class="glyphicon glyphicon-off"></span>&nbsp;注销</button>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-3">
        <div id="tree"></div>
      </div>
      <div class="col-md-9">
        <div class="row">
          <div class="col-md-12">
            <ol class="breadcrumb" id="breadcrumb">
              <li>
                <a href="#" target="contentFrame">首页</a>
              </li>
            </ol>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <div class="embed-responsive embed-responsive-16by9">
              <iframe name="contentFrame" id="contentFrame" class="embed-responsive-item" src="UserEchart.html"></iframe>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script>
    var currentTime = function(){
      $("#currentTime").html(moment().format("YYYY-MM-DD HH:mm:ss"));
    }

    $(function(){
      setInterval(currentTime, 1000);

      User = {
        "userId": 2
      }

      $.ajax({
        type: "put",
        url: "http://localhost:8801/getDaoHang",
        async: true,
        contentType: "application/json;charset-utf-8",
        data: JSON.stringify(User),
        dataType: "json",
        success: function(res){
          console.log("获得后端导航的返回结果：");
          console.log(res);

          $("#tree").treeview({
            data: res,
            selectedBackColor: "#0F3E6E",
            selectedIcon: "glyphicon glyphicon-ok",
            expandIcon: "glyphicon glyphicon-plus",
            onNodeSelected: function(event, data){
              console.log(data);
              var parent = $("#tree").treeview("getNode", data.parentId);
              console.log(parent);
              $("#breadcrumb").html("<li>" + parent.text + "</li>" + "<li>" + data.text + "</li>");
              $("#contentFrame").attr("src", data.href);
              console.log("=========");
            }
          })
          
        }
      })
    })
  </script>
</body>
</html>